<template>
  <div class="login-wrap">
    <el-form ref="loginFormRef" class="login-container" :model="loginForm" :rules="loginRules" size="large">
      <h1 class="title">用户登录</h1>
      <el-form-item prop="username">
        <el-input
          v-model="loginForm.username"
          type="text"
          placeholder="用户名：admin / user"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="loginForm.password" type="password" placeholder="123456" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="width: 100%" @click="login(loginFormRef)">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts" name="login">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { Login } from '@/api/interface'
import { GlobalStore } from '@/store'
import { ElForm, ElNotification } from 'element-plus'
import { loginApi } from '@/api/modules/login'
import md5 from 'js-md5'
import { HOME_URL } from '@/config/config'
import { getTimeState } from '@/utils/util'
import { initDynamicRouter } from '@/router/modules/dynamicRouter'

const globalStore = GlobalStore()
const router = useRouter()

// 定义 formRef（校验规则）
type FormInstance = InstanceType<typeof ElForm>
const loginFormRef = ref<FormInstance>()
const loginRules = reactive({
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
})
const loginForm = reactive<Login.ReqLoginForm>({ username: '', password: '' })
const login = (formEl: FormInstance | undefined) => {
  console.log('formEl', formEl)
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (!valid) return
    try {
      // 1.执行登录接口
      const { data } = await loginApi({
        ...loginForm,
        password: md5(loginForm.password)
      })
      globalStore.setToken(data.access_token)

      // 2.添加动态路由
      await initDynamicRouter()

      // 3.清除上个账号的 tab 信息
      // tabsStore.closeMultipleTab()

      // 4.跳转到首页
      router.push(HOME_URL)
      ElNotification({
        title: getTimeState(),
        message: '欢迎登录 Geeker-Admin',
        type: 'success',
        duration: 3000
      })
    } catch (err) {
      console.log(err)
    }
  })
}
</script>
<style lang="less" scoped>
.login-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  background-image: url();
  /* background-color: #112346; */
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 100%;
}

.login-container {
  border-radius: 10px;
  margin: 0px auto;
  width: 350px;
  padding: 30px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  text-align: left;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}

.title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
</style>
